<template>
   <!-- 我们不知道什么时候可以拿到 max 的值 （因为异步） 所以可能出现 undefined 的情况 但总会拿到个max 的值  所以我们可以 -->
   <!-- 使用 watch 来进行监听 监听父组件传递过来的 max 值，不管 watch 会被触发几次  但是最后一次肯定是个合法的 max 数值 -->
   <div class="mui-numbox" data-numbox-min="1">
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" :value="initcount" @change="changeCount" ref="numbox" readonly>
		<button class="mui-btn mui-btn-numbox-plus" type="button" disabled="">+</button>
   </div>
</template>

<script>
import mui from "../../lib/dist/js/mui.min.js";
export default {
    // data() {
    //     return {
    //         count: 1,
    //     }
    // },
    mounted() {
        mui(".mui-numbox").numbox();
    },
    props: ["initcount","goodsid"],   // 双引号千万不能忘！！！！
    methods: {
        changeCount() {
            // 每当数量改变，则立即把最新的数量同步到 购物车的 store中  覆盖之前的数量值
            this.$store.commit("updateGoodsinfo",{id: this.goodsid, count: this.$refs.numbox.value});
        }
    }
}
</script>


<style lang="scss" scoped>

</style>
